<template>
  <div id="spaceAnalyzePage">
    <h2 style="text-align: center">
      图库分析 -
      <span v-if="queryAll"> 全部图库 </span>
      <span v-else-if="queryPublic"> 公共图库 </span>
      <span v-else>
        <a :href="`/space/${spaceId}`" target="_blank" v-if="spaceName">{{ spaceName }}</a>
        <a :href="`/`" target="_blank" v-if="false">
          {{ '公共图库' }}
        </a>
        <div v-if="queryAll">全部图库</div>
      </span>
    </h2>
    <div style="margin-bottom: 20px" />
    <a-row :gutter="[16, 16]">
      <!-- 空间使用分析 -->
      <a-col :xs="24" :md="12">
        <SpaceUsageAnalyze :spaceId="spaceId" :queryAll="queryAll" :queryPublic="queryPublic" />
      </a-col>
      <!-- 空间分类分析 -->
      <a-col :xs="24" :md="12">
        <SpaceCategoryAnalyze :spaceId="spaceId" :queryAll="queryAll" :queryPublic="queryPublic" />
      </a-col>
      <!-- 标签分析 -->
      <a-col :xs="24" :md="12">
        <SpaceTagAnalyze :spaceId="spaceId" :queryAll="queryAll" :queryPublic="queryPublic" />
      </a-col>
      <!-- 图片大小分段分析 -->
      <a-col :xs="24" :md="12">
        <SpaceSizeAnalyze :spaceId="spaceId" :queryAll="queryAll" :queryPublic="queryPublic" />
      </a-col>
      <!-- 用户上传行为分析 -->
      <a-col :xs="24" :md="isAdmin ? 12 : 24">
        <SpaceUserAnalyze :spaceId="spaceId" :queryAll="queryAll" :queryPublic="queryPublic" />
      </a-col>
      <!-- 空间使用排行分析 -->
      <a-col :xs="24" :md="isAdmin ? 12 : 0">
        <SpaceRankAnalyze v-if="isAdmin" :queryAll="queryAll" :queryPublic="queryPublic" />
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import SpaceUsageAnalyze from '@/components/analyze/SpaceUsageAnalyze.vue'
import SpaceCategoryAnalyze from '@/components/analyze/SpaceCategoryAnalyze.vue'
import SpaceTagAnalyze from '@/components/analyze/SpaceTagAnalyze.vue'
import SpaceSizeAnalyze from '@/components/analyze/SpaceSizeAnalyze.vue'
import SpaceUserAnalyze from '@/components/analyze/SpaceUserAnalyze.vue'
import SpaceRankAnalyze from '@/components/analyze/SpaceRankAnalyze.vue'
import { useRoute } from 'vue-router'
import { computed, onMounted, ref } from 'vue'
import { useLoginUserStore } from '@/stores/useLoginUserStores.ts'
import { getSpaceVoByIdUsingGet } from '@/api/spaceController.ts'
import { message } from 'ant-design-vue'

const route = useRoute()
// 空间Id
const spaceId = computed(() => {
  return route.query?.spaceId as string
})
// 是否查询所有空间
const queryAll = computed(() => {
  return !!route.query?.queryAll
})
// 是否查询公共空间
const queryPublic = computed(() => {
  return !!route.query?.queryPublic
})

/**
 * 判断当前用户是否为管理员
 */
const loginUserStore = useLoginUserStore()
const loginUser = loginUserStore.loginUser
const isAdmin = computed(() => {
  return loginUser?.userRole === 'admin'
})

const spaceName = ref<string>()

const getSpaceName = async () => {
  const res = await getSpaceVoByIdUsingGet({
    // @ts-ignore
    id: spaceId.value,
  })
  if (res.data.code === 0 && res.data.data) {
    spaceName.value = res.data.data?.spaceName
  } else {
  }
}

onMounted(() => {
  getSpaceName()
})
</script>

<style scoped></style>
